<template>
  <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="black"
      text-color="#fff"
      active-text-color="#ffd04b">
    <el-menu-item index="1" @click="onSearch">文件搜索</el-menu-item>
    <el-submenu index="2">
      <template slot="title">索引操作</template>
      <el-menu-item index="2-1" @click="indexCreate">索引建立</el-menu-item>
      <el-menu-item index="2-2">索引删除</el-menu-item>
      <el-submenu index="2-4">
        <template slot="title">选项4</template>
        <el-menu-item index="2-4-1">选项1</el-menu-item>
        <el-menu-item index="2-4-2">选项2</el-menu-item>
        <el-menu-item index="2-4-3">选项3</el-menu-item>
      </el-submenu>
    </el-submenu>
    <el-menu-item index="3">消息中心</el-menu-item>
    <el-menu-item index="4" style="float: right">个人中心 <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="margin: 10px"></el-avatar></el-menu-item>
  </el-menu>

</template>

<script>
// @ is an alias to /src


export default {
  name: 'Nav',
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    onSearch(){
      this.$router.push(
          {
            path: `/search`
          }
      )
    },
    indexCreate(){
      this.$router.push(
          {
            path: `/indexCreate`
          }
      )
    },
  }
}
</script>
<style>
html,body{
  margin:0;
  padding:0;
}
</style>